<template>
  <d2-container>
  <div style="height: 100%">
    <div class="layout">
      <div class="admin-header" :style="curColor">
        <div class="nav">
          <div class="logo">
            <img src="../../../assets/LOGO.png" alt="">
          </div>
          <ul style="min-width:800px;">
            <li>
              <img style="width:12px;height:12px;margin-right:5px;" src="../../../assets/peopen2.png" alt=""/>
              用户名：{{userInfo.AdminName}}
            </li>
            <router-link style="color:#FACC21" to="fundsmanagement">本金：{{userInfo.Money}}</router-link>
            <li>
              <router-link to="accountrecharge"> 账户充值</router-link>
            </li>
            <li>
              <a href="#" @click="loginout()">退出</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="indexContent" :style="{'height':centerHeight}">
        <div class="content-left" style="background:#545c64;">
          <el-menu class="el-menu-vertical-demo" :router=true :unique-opened=true background-color="#545c64"
                   :default-active="$route.path" text-color="#fff" active-text-color="#ffd04b">
<!--            <el-menu-item index="/mdd/home">-->
<!--              <i class="el-icon-menu"></i>-->
<!--              <span slot="title">首页</span>-->
<!--            </el-menu-item>-->
            <el-submenu :index="item.id" v-for="item in navlist" :key="item.id">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.title}}</span>
              </template>
              <el-menu-item v-for="one in item.list" :key="one.name" :index="one.path" style="text-align: center">
                <span slot="title" style="">{{one.name}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="/inform">
              <i class="el-icon-menu"></i>
              <span slot="title">使用说明</span>
            </el-menu-item>
          </el-menu>
        </div>
        <!-- <div style="width:50px;height:auto;border-radius:4px;margin-top:12%;float:right;background:black;cursor: pointer;">
          <div class="ceing">
            <div class="ce online">
              <a href="#">在线客服</a>
              <div class="custom_service_bg">
                <p>客服咨询时间<br>9:00-21:00</p>
                <img src="../../assets/service_btn.png" alt="">
              </div>
            </div>
            <div class="ce"><a href="http://help.godhand.cn/" target="_blank">新手教程</a></div>
            <div class="ce"><a href="#">常见问题</a></div>
            <div class="ce" @click="$router.push('/mdd/feedback')"><a href="#">意见反馈</a></div>
          </div>
        </div> -->
        <div class="content-right">
          <div class="body" style="background:white;min-width:800px;">
            <!-- <div style="font-size:18px;">{{bodyTitle}}</div> -->
            <router-view @getMoney='getMoney'></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
  </d2-container>
</template>
<script>
  export default {
    name: "AdminIndex",
    data() {
      return {
        centerHeight: document.body.clientHeight - 60 + 'px',
        orign: window.location.origin,
        hrefing: window.location.href,
        dialogMoney: false,
        default: "",
        activeList: "/user",
        bodyTitle: "",
        title: localStorage.getItem("currentTitle"),
        userInfo: {},
        curColor: {
          background: this.Currentcolor
        },
        navlist: [
          {
            id: '1',
            title: '发货管理',
            icon: 'el-icon-menu',
            list: [
              {path: '/freeCreatorder', name: '创建订单'},
              {path: '/address', name: '发货地址'},
            ]
          },
          {
            id: '2',
            title: '店铺管理',
            icon: 'el-icon-menu',
            list: [
              {path: '/Launch_event', name: '发布任务'},
              {path: '/bindingshops', name: '绑定店铺'},
              {path: '/price', name: '价格列表'},
              {path: '/refundList', name: '投诉中心'},
              // {path: '/mdd/List_Agents', name: '代理商家'},
            ]
          },
          {
            id: '3',
            title: '管理中心',
            icon: 'el-icon-setting',
            list: [
              {path: '/noticelist', name: '公告'},
              {path: '/fundsmanagement', name: '资金管理'},
              {path: '/passwordsetting', name: '修改密码'}
            ]
          },
          {
            id: '4',
            title: '推广赚佣',
            icon: 'el-icon-menu',
            list: [
              // { path:'/mdd/ranking',name:'排行榜' },
              {path: '/Merchant', name: '邀请商家'}
            ]
          },
          {
            id: '5',
            title: '订单管理',
            icon: 'el-icon-menu',
            list: [
              {path: '/taskInfo', name: '订单明细'},
              {path: '/orderlist', name: '订单审核'},
            ]
          },
          {
            id: '6',
            title: '评价管理',
            icon: 'el-icon-menu',
            list: [
              {path: '/evaluatelist', name: '评价审核'},
              {path: '/evaluation', name: '评论列表'},
            ]
          },
          // {
          //   id:'4',
          //   title:'使用说明',
          //   icon:'el-icon-document',
          //   path:'/mdd/inform'
          // },
          // {
          //   id:'4',
          //   title:'售后管理',
          //   icon:'el-icon-document',
          //   list:[
          //     { path:'/blacklist',name:'黑名单' },
          //     { path:'/fankui',name:'意见反馈' }
          //   ]
          // }
        ]
      };
    },
    methods: {
      getMoney(value) {
        this.userInfo.Money = value
      },
      // 路由切换
      routerChange(router) {
        let _this = this;
        switch (router.path) {
          case "/businesscenter":
            _this.bodyTitle = "商家管理";
            break;
          case "/fankui":
            _this.bodyTitle = "意见反馈";
            break;
          case "/Purchase_point":
            _this.bodyTitle = "购买萌点";
            break;
          case "/Merchant":
            _this.bodyTitle = "邀请商家";
            break;
          case '/recharge':
            _this.bodyTitle = "账号充值";
            break;
          case "/businesscenter2":
            _this.bodyTitle = "下属中间商管理";
            break;
          case "/price":
            _this.bodyTitle = "价格列表";
            break;
          case "/WeChat":
            _this.bodyTitle = "微信支付";
            break;
          case "/inform":
            _this.bodyTitle = "我的通知";
            break;
          case "/tj":
            _this.bodyTitle = "邀请有奖";
            break;
          case "/blacklist":
            _this.bodyTitle = "黑名单";
            break;
          case "/taskInfo":
            _this.bodyTitle = "订单明细";
            break;
          case "/log":
            _this.bodyTitle = "日志中心";
            break;
          case "/commentList":
            _this.bodyTitle = "评价审核";
            break;
          case "/refundList":
            _this.bodyTitle = "申诉中心";
            break;
          case "/refundList1":
            _this.bodyTitle = "投诉中心";
            break;
          case "/setting":
            _this.bodyTitle = "配置中心";
            break;
          case "/money":
            _this.bodyTitle = "账务明细";
            break;
          case "/Launch_event":
            _this.bodyTitle = "发布任务";
            break;
          case "/index":
            _this.bodyTitle = "用户管理";
            break;
          case "/permissions":
            _this.bodyTitle = "权限设置";
            break;
          case "/ranking":
            _this.bodyTitle = "排行榜";
            break;
          case "/backup":
            _this.bodyTitle = "好评上传";
            break;
          case "/phone":
            _this.bodyTitle = "用户中心";
            break;
          case "/activity":
            _this.bodyTitle = "好评活动";
            break;
          case "/agentorder":
            _this.bodyTitle = "订单明细";
            break;
          case "/personagent":
            _this.bodyTitle = "个人代理中心";
            break;
          case "/information":
            _this.bodyTitle = "基本信息";
            break;
          case "/accountrecharge":
            _this.bodyTitle = "账户充值";
            break;
          case "/adcertification":
            _this.bodyTitle = "实名认证";
            break;
          case "/businesscenter":
            _this.bodyTitle = "商家中心";
            break;
          case "/passwordsetting":
            _this.bodyTitle = "修改登录密码";
            break;
          case "/fundsmanagement":
            _this.bodyTitle = "资产管理";
            break;
          case "/agentlist":
            _this.bodyTitle = "代理列表";
            break;
          case "/bindingshops":
            _this.bodyTitle = "绑定店铺";
            break;
          case "/bindingshop":
            _this.bodyTitle = "绑定新商家";
            break;
          case "/chat":
            _this.bodyTitle = "联系客服";
            break;
          case "/feedback":
            _this.bodyTitle = "意见反馈";
            break;
        }
      },

      loginout() {
        localStorage.removeItem("userinfo")
        window.location = "/";
      }
    },
    computed: {
      tbHeight() {
        return document.body.clientHeight - 145
      }
    },
    watch: {
      $route(a, b, c) {
        let _this = this;
        _this.routerChange(a);
      }
    },

    mounted() {
      let _this = this;
      let meta = document.getElementsByTagName("meta");
      meta[0].setAttribute("content", "");
      // document.title = "萌哒哒";
      //let result = /admin\/(\w+)/.exec(window.location.hash);
      let result = /\/(\w+)/.exec(_this.$route.path);
      _this.routerChange(_this.$route);
      // _this.$store.commit("switchAdmin", true);
      // _this.$store.commit("switchId", "admin");
      _this.userInfo = JSON.parse(localStorage.getItem('userinfo'))
    }
  };
</script>
<style lang="scss" scoped>
  .ceing {
    width: 100%;
    height: 300px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .ce {
    position: relative;
    width: 75%;
    height: 50px;
    color: white;
    text-align: center;
    margin: 0 auto;

    .custom_service_bg {
      display: none;
      position: absolute;
      z-index: 9999;
      left: -132px;
      top: -27px;
      width: 130px;
      height: 100px;
      background: url('../../../assets/custom_service_bg.png');
      background-size: 100% 100%;

      p {
        color: #000;
        padding-right: 10px;
        margin-bottom: 2px;
      }

      img {
        height: 30px;
        transform: translateX(-6px);
      }
    }

    &.online {
      &:hover > .custom_service_bg {
        display: block;
      }
    }
  }

  .ceing a {
    color: #fff;
  }

  .ce:hover a {
    color: #ff4081;
  }

  .layout {
    background-color: rgb(236, 236, 236);
    min-height: 100%;
  }

  .admin-header {
    // background-color:#409EFF;
    background: #fff;
    border-bottom: 1px solid #f2f2f2;
    height: 60px;
  }

  .mu-item.selected .mu-item-left {
    color: #2196f3;
  }

  .el-menu-vertical-demo {
    border-radius: 5px;
  }

  .indexContent {
    // overflow: hidden;
    // min-height: 100%;
    background-color: white;
  }

  .content-left {
    // border-radius:4px;
    // margin-top:20px;
    height: 100%;
    width: 200px;
    box-sizing: border-box;
    float: left;
    padding-bottom: 60px;
    /*min-height: 873px;*/
    // margin:20px auto;
    // border-radius:10px;
    overflow-y: auto;
  }

  .content-left::-webkit-scrollbar {
    display: none;
  }

  .content-left ul {
    border: none;
  }

  .content-right {
    width: calc(100% - 200px);
    display: inline-block;
    float: right;
    // padding: 10px 20px;
    // background-color: rgba(0, 0, 0, 0);
    height: 100%;
    // min-height: 880px;
  }

  .body {
    /*background-color: white;*/
    // border-radius: 5px;
    padding: 15px;
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    // margin-top: 10px;
  }

  .listtitle {
    font-size: 14px;
    color: #3a8ee6;
  }

  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      height: 61px;
      display: flex;
      align-items: center;

      img {
        background: #545c64;
        width: 200px;
      }
    }
  }

  .nav ul {
    text-align: center;
    margin: 0;
    color: #333;
    text-align: right;
  }

  .nav ul li {
    list-style: none;
    display: inline-block;
    margin: 20px auto;
    padding: 0 20px;
  }

  .nav ul li a {
    color: #333;
  }

  .el-menu-item i,
  .el-menu-item span {
    vertical-align: middle;
  }

  .el-menu-item, .el-submenu__title {
    height: 42px;
    line-height: 42px;
  }

  .el-menu-vertical-demo h2 {
    font-size: 19px;
    color: #333;
    /*margin-left: 26px;*/
  }
</style>
<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
